<template>
  <div>
      <div class="auth-contain">
        <div class="left-nav">
            <div><span class="title">菜单项管理</span></div>
            <!-- <ul>
                <nav-li :model="item" @getValue="getClickValue" :checkedId.sync="checked" v-for="(item,index) in dataList" :key="item.id"></nav-li>
            </ul> -->
            <ul>
                <el-tree
                    highlight-current	
                    :data="dataList"
                    node-key="id"
                    :props="defaultProps"
                    :default-checked-keys="defaultChecked"
                    default-expand-all	
                    ref='authorityTree'
                    @current-change	='currentChange'  
                    :expand-on-click-node='false'	
                    >
                 </el-tree>
            </ul>
        </div>
        <div class="right-cont">
            <div><span class="title">下级权限</span></div>
          
            <ul ref='authObj'>
                <li><span>名称</span><el-input :value="authObj.name" :disabled="disabled" size='small'></el-input></li>
                <li><span>URL表达式</span><el-input :value="authObj.url" :disabled="disabled" size='small'></el-input></li>
                <li><span>配置属性</span><el-input :value="authObj.properties" :disabled="disabled" size='small'></el-input></li>
                <li><span>父权限</span><el-input :value="parentName" :disabled="true" size='small'></el-input></li>
                <li><span>Last Update</span><el-input :value="authObj.lastUpdated" :disabled="true" size='small'></el-input></li>
                <li><span>Date Create</span><el-input :value="authObj.dateCreated" :disabled="true" size='small'></el-input></li>
                <li><span>子权限</span><el-input :value="childToken" :disabled="true" size='small'></el-input></li>
            </ul>
            <!-- <i class="fa fa-refresh refresh" @click="refresh(2)" title="刷新"></i>
            <i class="fa fa-trash delete" @click="del(authObj)" title="删除"></i> -->
            <div class="right-cont-button">
                <el-button type='primary' @click.stop='dialogFormVisible = true'>新增</el-button>
                <el-button  
                    v-if='disabled'
                    @click.stop='disabled = false'>编辑</el-button>
                <el-button  
                    v-else
                    @click.stop='save'
                    type='warning'
                    >保存</el-button>
                <el-button type='danger' @click.stop='del'>删除</el-button>
            </div>
           
        </div>
             
  </div>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    size='tiny'
    :modal='false'
    @close='cancel'
    >
    <span>确定保存吗</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click.stop="savesure">确 定</el-button>
    </span>
  </el-dialog>

<!-- form表单dialog -->
    <el-dialog 
    title="创建 URL功能权限" 
    :visible.sync="dialogFormVisible"
     @open='sendFormAjax'> 

        <el-form :model="ruleForm" ref='ruleForm' :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="URL表达式" prop="url">
                <el-input v-model="ruleForm.url"></el-input>
            </el-form-item>
             <el-form-item label="配置属性">
                <el-input v-model="ruleForm.type"></el-input>
            </el-form-item>
            <el-form-item label="父权限">
                <el-select v-model="formData" placeholder="请选择">
                  <el-option v-for='item in formSelect' :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.stop="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.stop="addForm(ruleForm)">创 建</el-button>
        </div>
    </el-dialog>  
  </div>

</template>
<script>
// import NavLi from '@/components/public/circleNav'
import Vue from 'vue'
import { Tree, Button, Dialog, Notification, MessageBox, Message, Select, Option } from 'element-ui'
Vue.use(Tree)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(Select)
Vue.use(Option)


export default {
    data () {
        let validate = (rule, value, callback) => {
            if (value) {
                var strRegex = '^/([a-zA-Z0-9]+)(/[a-zA-Z0-9\*]{0,}||/[a-zA-Z0-9\*]{0,}/[a-zA-Z0-9\*]{0,})$';
                var re = new RegExp(strRegex);
                if (!re.test(value)) {
                    return callback(new Error('不合法的URL表达式，正确格式如：/org/edit/** 或者 /org/edit'));
                }
                callback();
            }
        };
        return {
            dataList: [],
            authObj: {},
            defaultProps: {
                children: 'childList',
                label: 'name'
            },
            defaultChecked: [],
            disabled: true,
            childToken: '',
            dialogVisible: false,
            id: null,
            dialogFormVisible: false,
            formData: '',
            formSelect: '',
            ruleForm: {
                name: '',
                type: '',
                url: ''
            },
            rules: {
                name: [
                    { required: true, message: '名称为必填项', trigger: 'blur' }
                ],

                url: [
                    { required: true, message: 'URL表达式为必填项', trigger: 'blur' },
                    { validator: validate, trigger: 'blur' }
                ]
            },
            parentName: null

        }
    },
    // components:{
    //     NavLi
    // },
    computed: {
        checked: function () {
            return this.authObj.id;
        }
    },
    mounted () {
        this.refresh(true);
    },
    methods: {
        addForm () {

            this.$refs['ruleForm'].validate((valid) => {

                if (valid) {
                    let params = {
                        name: this.ruleForm.name,
                        url: this.ruleForm.url,
                        properties: this.ruleForm.type || null,
                        parentId: this.formData || null
                    }
                    this.Axios.Post(this.URL.modifyPermission.url, params)
                        .then((res) => {
                            if (res.status == 200) {
                                Message({
                                    message: '创建成功',
                                    type: 'success'
                                })
                            } else {
                                Message({
                                    message: '创建失败，请重试',
                                    type: 'danger'
                                })
                            }
                            this.refresh()
                            this.dialogFormVisible = false
                        })
                }
            });
        },

        sendFormAjax () {
            this.ruleForm = {
                name: '',
                url: '',
                type: ''
            }

            this.formData = ''

            this.Axios.Post(this.URL.permissionList.url)
                .then(res => this.formSelect = res.data.datas.permissionList)
        },

        save () {

            this.disabled = true
            this.dialogVisible = true
        },

        savesure () {
            let params = {
                name: '',
                url: '',
                properties: '',
                id: this.id
            }
            let lis = this.$refs.authObj.querySelectorAll('li')
            for (let i = 0; i < lis.length - 4; i++) {
                params.name = lis[0].querySelector('input').value
                params.url = lis[1].querySelector('input').value
                params.properties = lis[2].querySelector('input').value
            }
            this.Axios.Post(this.URL.modifyPermission.url, params)
                .then((res) => {
                    if (res.status === 200) {
                        Notification({
                            title: '保存成功',
                            type: 'success',
                            offset: '1'
                        })

                        this.Axios.Post(this.URL.queryPermission.url)
                            .then((res) => {
                                this.dataList = res.data.datas.permissionList
                            })
                    } else {
                        Notification({
                            title: '保存失败',
                            type: 'error',
                            offset: '1'
                        })
                    }
                })
            this.dialogVisible = false

        },
        currentChange (key) {
            this.id = key.id

            this.Axios.Post(this.URL.findmuneByinfo.url, { permissionid: this.id })

                .then((res) => {

                    this.authObj = res.data.datas.menuInfo
                    this.parentName = res.data.datas.parentPermissions.name
                    if (this.authObj.childList) {
                        let arr = []
                        this.authObj.childList.forEach((ele, i) => {

                            arr.push(ele.name)

                        })

                        this.childToken = arr.toString()

                    } else {
                        this.childToken = ''
                    }

                })
        },
        cancel () {
            this.authObj = ''

            this.Axios.Post(this.URL.findmuneByinfo.url, { permissionid: this.id })

                .then((res) => {

                    this.authObj = res.data.datas.menuInfo
                    this.parentName = res.data.datas.parentPermissions.name
                    if (this.authObj.childList) {
                        let arr = []
                        this.authObj.childList.forEach((ele, i) => {

                            arr.push(ele.name)

                        })

                        this.childToken = arr.toString()

                    } else {
                        this.childToken = ''
                    }

                })

            // this.dialogVisible = false
        },
        // getClickValue: function (value) {

        //     this.authObj = value;
        // },
        del () {
            MessageBox.alert('此操作将永久删除该权限,是否继续', '是否删除 ' + this.authObj.name, {
                confirmButtonText: '确定',
                cancelButtonText: "取消",
                callback: action => {
                    if (action === "cancel") {
                        return;
                    }
                    this.Axios.Post(`${this.URL.deletePermission.url}?permissionId=${this.id}`).then(() => {


                        this.refresh()

                        Message({
                            message: '删除成功',
                            type: 'success'
                        });

                    })

                }
            });
        },
        refresh (mounted = false) {

            // self.Axios.Post(this.URL.findmuneByinfo.url)
            //     .then((res)=>{
            //         console.log(res)
            //     })
            this.Axios.Post(this.URL.queryPermission.url).then((res) => {

                this.dataList = res.data.datas.permissionList

                this.authObj = this.dataList[0]

                this.id = this.dataList[0].id


                // 页面初始化要再调另一个借口

                if (mounted) {
                    this.Axios.Post(this.URL.findmuneByinfo.url, { permissionid: this.id })
                        .then((res) => {
                            this.parentName = res.data.datas.parentPermissions.name

                        })
                }

                if (this.dataList[0].childList) {
                    let arr = []
                    this.dataList[0].childList.forEach((ele, i) => {

                        arr.push(ele.name)

                    })

                    this.childToken = arr.toString()

                } else {
                    this.childToken = ''
                }

            })
        }
    }

}
</script>
<style>
.auth-contain .demo-ruleForm {
  padding-right: 60px;
}
.auth-contain .demo-ruleForm > .el-input {
  width: 75%;
}

.auth-contain .demo-ruleForm > .el-select {
  width: 100%;
}
.auth-contain .form-dialog {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 40px 12px 0px;
}
.auth-contain .form-dialog span {
  font-weight: bold;
  text-align: right;
  width: 20%;
}
.auth-contain .form-dialog > div {
  width: 70%;
}
.auth-contain .el-input.is-disabled .el-input__inner {
  background: #fff;
  cursor: auto;
  border: 0;
  color: #1f2d3d;
}

.auth-contain .el-input.is-disabled.el-input__inner {
  border: 0;
  background-color: #fff;
}
.auth-contain .right-cont-button {
  margin: 0 auto;
  text-align: right;
  padding-right: 35px;
}
.auth-contain {
  clear: both;
}
.auth-contain > div {
  float: left;
  background-color: #fff;
  margin: 1% 1%;
  min-height: 570px;
}
.auth-contain .title {
  font-weight: 600;
}
.auth-contain .left-nav {
  width: 36%;
}
.auth-contain .right-cont {
  width: 60%;
}
.left-nav > div,
.right-cont > div {
  line-height: 50px;
  height: 50px;
  /* border-bottom:1px solid #eee; */
  padding-left: 20px;
}
.left-nav > ul,
.right-cont > ul {
  padding: 30px 35px 20px 35px;
}
.right-cont > ul > li {
  line-height: 3;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
}
.right-cont > ul > li:not(:last-child) {
  border-bottom: none;
}
.right-cont > ul > li > span {
  display: inline-block;
  width: 80%;
}
.right-cont > i {
  display: inline-block;
  font-size: 24px;
  color: #fff;
  margin-left: 35px;
}
.right-cont > i:hover {
  color: #444;
}
.right-cont .refresh,
.right-cont .delete {
  background-color: #18a689;
  display: inline-block;
  width: 50px;
  line-height: 30px;
  text-align: center;
  height: 30px;
  border-radius: 6px;
}
</style>
